<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>第一题</h1>
    <input type="text" value="123">
    <button>修改输入框内容</button>
    <button>读取输入框内容</button>
    <button>移除输入框内容</button>
    <h1>第二题</h1>
    <button>修改指定class的背景颜色--未封装</button>
    <button>修改指定class的背景颜色--已封装</button>
    <ul id="aa">
        <li>无</li>
        <li class="aaaa">class</li>
        <li>无</li>
        <li class="aaaa">class</li>
        <li class="aaaa">class</li>
    </ul>
</body>
<script>
    window.onload = function(){
        // 第一题
        let bu = document.getElementsByTagName('button');
        let ip = document.getElementsByTagName('input')[0];
        bu[0].onclick = function(){
            console.log(ip)
            ip.setAttribute('value','修改完毕')
        }
        bu[1].onclick = function(){
            let aa = ip.getAttribute('value')
            alert(aa)
        }
        bu[2].onclick = function(){
            ip.removeAttribute('value')
        }
        // 第二题
        let aa = document.getElementById('aa').children;
        bu[3].onclick = function(){
            for (let i = 0; i < aa.length; i++) {
                if (aa[i].className == 'aaaa') {
                    aa[i].style.backgroundColor = 'red';
                }
            }
        }
        bu[4].onclick = function(){
            fengzhuang(aa,'aaaa')
        }
        function fengzhuang(hh,jj){
            for (let i = 0; i < aa.length; i++) {
                if (aa[i].className == jj) {
                    aa[i].style.backgroundColor = 'pink';
                }
            }
            console.log(hh,jj)
        }

    }
</script>
</html>